<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>GoodsList - Swim System</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link href="/swimpool-ssm/back/resources/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
		<link href="/swimpool-ssm/back/resources/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
		<!-- Data Tables -->
		<link href="/swimpool-ssm/back/resources/css/plugins/dataTables/dataTables.bootstrap.css"
			rel="stylesheet">
		<link href="/swimpool-ssm/back/resources/css/animate.min.css" rel="stylesheet">
		<link href="/swimpool-ssm/back/resources/css/style.min.css?v=4.0.0" rel="stylesheet">
		<script src="/swimpool-ssm/back/resources/js/jquery.min.js?v=2.1.4"></script>
		<script src="/swimpool-ssm/back/resources/js/bootstrap.min.js?v=3.3.5"></script>
		<script src="/swimpool-ssm/back/resources/js/plugins/jeditable/jquery.jeditable.js"></script>
		<script src="/swimpool-ssm/back/resources/js/plugins/dataTables/jquery.dataTables.js"></script>
		<script src="/swimpool-ssm/back/resources/js/plugins/dataTables/dataTables.bootstrap.js"></script>
		<script src="/swimpool-ssm/back/resources/js/content.min.js?v=1.0.0"></script>
		<script src="/swimpool-ssm/js/util.js"></script>
	</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>
								GoodsList
							</h5>
							<div class="ibox-tools">
								<a class="collapse-link" href="/swimpool-ssm/back/class/goodsInsert.html">Insert</i>
								<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</div>
						</div>
						<div class="ibox-content">
							<table
								class="table table-striped table-bordered table-hover dataTables-example">
								<thead>
									<tr>
										<th name="count">Count</th>
						                <th name="name">name</th>
						                <th name="price">price</th>
						                <th name="perLong">PerLong</th>
						                <th name="weekLong">WeekLong</th>
						                <th name="totalPrice">TotalPrice</th>
						                <th name="peoNum">PeopleNum</th>
						                <th name="souTypeStr">Type</th>
						                <th name="statusStr">Status</th>
						                <th name="createTime">Create Time</th>
						                <th name="oper">oper</th>
									</tr>
								</thead>
								<tbody id="dataList">
								</tbody>
							</table>
							
							<form id="pageForm" method="post">
								<div class="row">
									<div class="col-sm-6">
										<div class="dataTables_info">
											show:<span id="totalPage"></span>Page，total:<span id="totalRecord"></span>Record</div>
									</div>
									<div class="col-sm-6">
										<div class="dataTables_paginate" >
											<ul class="pagination">
												<li>
													<a href="#" id="firstPage" style="margin-left: 10px" onclick="return getServerData('firstPage','currentPage','pageSize')">First</a></a>
												</li>
												<li>
													<a href="#" id="prePage" style="margin-left: 10px" onclick="return getServerData('prePage','currentPage','pageSize')">Pre</a>
												</li>
												<li>
													<a href="#" id="nextPage" style="margin-left: 10px" onclick="return getServerData('nextPage','currentPage','pageSize')">Next</a>
												</li>
												<li>
													<a href="#" id="totalPageA" style="margin-left: 10px" onclick="return getServerData('totalPageA','currentPage','pageSize')">End</a>
												</li>
												<li style="margin-left: 10px">currentPage:<input type="text" name="currentPage" id="currentPage" size="5"/></li>
								              	<li style="margin-left: 10px">pageSize:<input type="text" name="pageSize" id="pageSize" size="5"/></li>
								              	<li><input type="submit" class="btn btn-default" onclick="return getServerData('','currentPage','pageSize')" value="Go"/></li>
											</ul>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	/**
		获取表头,
		存储到json中,
		key:是td的name属性
		value:是下标值
	*/
	var colData = [] ;
	$(".dataTables-example thead tr th").each(function(index)
	{
		var dataTemp = {} ;
		dataTemp.name = $(this).attr("name") ; 
		dataTemp.index = index ;
		colData.push(dataTemp);
	});
	
	/**
	*/
	function getServerData(pageDom,currentPage,pageSize)
	{
		if(pageDom != '' && pageDom != undefined )
		{
			/* get currentPage */
			var currentPageVal = $("#" + pageDom).attr("currentPage") ; 
			$("#" + currentPage).val(currentPageVal);
			var pageSizeVal = $("#" + pageDom).attr("pageSize") ; 
			$("#" + pageSize).val(pageSizeVal);
		}
		
		var postParam = $("#pageForm").serialize();
		/* 加载数据 */
		$.post(
			rootPath + "/class/goodsList.mvc",
			postParam,
			function(data)
			{
				console.info("==data===" + data)
				var dataList = data.data.list ; 
				var sb = "" ;
				for(i = 0 ;i < dataList.length ; i ++)
				{
					sb += "<tr>"
					var dataTemp = dataList[i] ; 
					for(var j = 0 ; j < colData.length ; j ++ )
					{
						var colTemp = colData[j] ;
						var colName = colTemp.name ; 
						/* 列的值 */
						var colVal = eval("dataTemp." + colName) ; 
						if(colName == 'count')
						{
							colVal = ( i + 1 ); 
						}else if(colName == 'oper')
						{
							/* oper */
							colVal = "<a class='J_menuItem' href='/swimpool-ssm/back/class/goodsUpdate.html?id="+ dataTemp.id +"&operType=update'>update</a>&nbsp;&nbsp;&nbsp;" ; 
							colVal += "<a class='J_menuItem' href='/swimpool-ssm/back/class/goodsUpdate.html?id="+ dataTemp.id +"'>info</a>" ;
						}
						/* 拼装数据 */
						/* 循环列 */
						sb += "<td>"+ colVal +"</td>"
					}
					sb += "</tr>"
				}
				
				/* 数据show */
				$("#dataList").html(sb);
				
				/* page */
				var pageInfoUtil = data.data.pageInfoUtil ; 
				$("#currentPage").val(pageInfoUtil.currentPage);
				$("#pageSize").val(pageInfoUtil.pageSize);
				
				$("#totalPage").html(pageInfoUtil.totalPage);
				$("#totalRecord").html(pageInfoUtil.totalRecord);
				
				$("#firstPage").attr("currentPage","1");
				$("#firstPage").attr("pageSize",pageInfoUtil.pageSize);
				
				$("#prePage").attr("currentPage",pageInfoUtil.prePage);
				$("#prePage").attr("pageSize",pageInfoUtil.pageSize);
				
				$("#nextPage").attr("currentPage",pageInfoUtil.nextPage);
				$("#nextPage").attr("pageSize",pageInfoUtil.pageSize);
				
				$("#totalPageA").attr("currentPage",pageInfoUtil.totalPage);
				$("#totalPageA").attr("pageSize",pageInfoUtil.pageSize);
			},
			"json"
		);
		
		return false ; 
	}
	
	/* 获取数据 */
	getServerData('','currentPage','pageSize');
	
	/* 删除小方块 */
	$("#firstPage").parent().children(".collapse-link").remove();
</script>